<script>
// 自定义横向时间线
export default {
  name: "timeLine",
  props: {
    timelineList: {
      required: true,
      type: Array,
      default: () => []
    },
    timeIndex: {
      default: 0,
      type: Number
    }
  },
  methods: {
    changeActive(index) {
      this.$emit('change', index)
    },
  }
}
</script>

<template>
  <div class="timeline-container">
    <el-row :gutter="0">
      <el-col :span="parseInt(24/timelineList.length)" v-for="(item,index) in timelineList" :key="index" class="center">
        <div class="timeline-item-box">
          <div class="row-end-col-start">
            <div class="item" :class="{active: item.done}" v-if="index !== 0"></div>
            <div>
              <div style="display: flex;flex-direction: column; align-items: center">
                <img v-if="item.hasOwnProperty('icon')" :src="item.icon" class="dot"/>
                <div v-else class="dot" @click="changeActive(index)" :class="{active: item.done}">
                  <p>{{ index + 1 }}</p>
                </div>
                <span class="timeline-item-title">{{ item.title }}</span>
              </div>
            </div>
          </div>

        </div>

      </el-col>
    </el-row>
  </div>
</template>
<style scoped>
p {
  margin: 0;
  padding: 0;
}

.timeline-container {
  position: relative;
  width: 100%;
  height: 30px;
  .timeline-item-box {
    position: relative;
    text-align: right;
    margin-top: 10px;
    .timeline-item-title {
      display: block;
      font-size: 15px;
      font-weight: bold;
      color: crimson;
      margin-top: 15px;
      width: 100%;
      text-align: right;
    }
  }
}

.dot {
  border: 2px solid #DCDFE6;
  width: 30px;
  height: 30px;
  border-radius: 30px;
  background: white;
  box-sizing: content-box;
  line-height: 30px;

  p {
    text-align: center;
    color: #DCDFE6;
    font-weight: bold;
  }

}

.item {
  flex: 1;
  border-bottom: 3px dashed #DCDFE6;
  box-sizing: border-box;
  height: 18px;
}

.active {
  border-color: crimson !important;
  box-sizing: content-box;

  p {
    color: crimson;
  }
}
</style>
